<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				height:100px;
				width:100px;
				background-color: red;
				position: relative;
				left:0;/* 盒子移动是通过 修改left的值 */
				right:0;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			//固定时间移动盒子  每10ms移动多少距离
			//1. 总路程？allWidth
			//2. 总时间----1000ms（固定时间） allTime
			let box=document.getElementById("box");
			let html=document.documentElement||document.body;
			let allWidth=html.clientWidth-box.offsetWidth;//总路程
			let allTime=1000;//总时间
			//每10ms移动多少距离
			let time=10;
			let speed=allWidth*time/allTime;
			let l=0;
			
			let timer=null;
			//点击小盒子，让盒子移动
			box.onclick=function(){
				if(timer==null){
					timer=setInterval(function(){
						l+=speed;//累计10ms,移动的距离
						if(l>=allWidth){//停止 定时器 移动的距离大于等于，累加移动当然距离
							clearInterval(timer);
							timer=null;
							box.style.left=allWidth+"px";//超出最大移动距离，等于最大移动距离
							return;
						}
						box.style.left=l+"px";
					},time)
				}
			}
		</script>
	</body>
</html>
